<template>
  <el-button @click="preview">点击报表预览</el-button>
  <div style="height: 100%" id="action_8_1_echo"></div>
</template>
<script setup>

import {_} from "lodash";

const reportDesignerId = "action_8_1_main"
import {usePreviewStore} from "@/stores/modules/xzPreviewStore";
import {onMounted, ref} from "vue";
import { queryonUpdateDataFrom} from "@/utils/onUpdateDataUtils.js";
import data3 from "./岳阳市康复医院列分栏_onupdatedata.json"

const usePreStore = usePreviewStore();
const option = {
  mode: 'read',  //  报表模式  read | edit  只读模式|编辑模式
  view: {
    width: () => document.documentElement.clientWidth,
    height: () => document.documentElement.clientHeight
  },   // 设置报表的宽高
  renderArrow: false,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: false,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
};

let spreadSheet;
let config=[];
let data = [];
let __updateData=[];
let __updateDatasetList=[]
onMounted(() => {
  spreadSheet = XZReport("#action_8_1_echo", option);

})
const preview = () => {
  if (usePreStore.xzReportDesigners.size > 0 && usePreStore.xzReportDesigners.has(reportDesignerId)) {
    config = _.cloneDeep(usePreStore.xzReportDesigners.get(reportDesignerId).config);

    data =_.cloneDeep( usePreStore.xzReportDesigners.get(reportDesignerId).data);
    __updateDatasetList =_.cloneDeep(  usePreStore.xzReportDesigners.get(reportDesignerId).__updateDatasetList);
    __updateData=_.cloneDeep( usePreStore.xzReportDesigners.get(reportDesignerId).__updateData);
    spreadSheet.update(config, data);
  }
}

const onUpdateData = (datasets, params) => {
  console.log("datasets:", datasets, "params:", params);
  return new Promise((resolve, reject) => {
    resolve(queryonUpdateDataFrom(datasets, params,__updateData));
  })
}
option.onUpdateData = onUpdateData


function onUpdateDatasetList() {
  console.log("onUpdateDatasetList  is called")
  return new Promise((resolve, reject) => {
    resolve(__updateDatasetList);

  })
}
option.onUpdateDatasetList = onUpdateDatasetList


</script>

